<template>
  <div class="center_bottom">
    <Echart
      :options="options"
      id="bottomLeftChart"
      class="echarts_bottom"
    ></Echart>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {},
    };
  },

  mounted() {},
  methods: {
    init(res) {
      this.options = {
        title: {
          text: "城市内涝指数",
          left: "center",
          textStyle: {
            // color: "#00eaff", // 修改字体颜色
            fontSize: 18, // 修改字体大小
          },
        },
        //canvas位置
        grid: {
          // left: 100,
          // bottom: 80,
        },
        toolbox: {
          //下载图片
          // feature: {
          //   saveAsImage: {}, // show 默认为 true
          // },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
          formatter: function (params) {
            // 添加单位
            var result = params[0].name + "<br>";
            params.forEach(function (item) {
              if (
                item.seriesName == "指数A" ||
                item.seriesName == "指数B" ||
                item.seriesName == "指数C"
              ) {
                result +=
                  item.marker +
                  " " +
                  item.seriesName +
                  " : " +
                  item.value +
                  "m³/s</br>";
              }

              // else if (item.seriesName == "面雨量") {
              //   result +=
              //     item.marker +
              //     " " +
              //     item.seriesName +
              //     " : " +
              //     item.value +
              //     "mm</br>";
              // }
              // else if (
              //   item.seriesName == "预测水位" ||
              //   item.seriesName == "实测水位"
              // )
              // {
              //   result +=
              //     item.marker +
              //     " " +
              //     item.seriesName +
              //     " : " +
              //     item.value +
              //     "m</br>";
              // }
            });
            return result;
          },
        },
        legend: {
          data: ["指数A", "指数B", "指数C"],
          textStyle: {
            // color: "#00eaff",
          },
          right: 0,
        },
        dataZoom: [
          {
            type: "inside",
          },
          // {
          //   show: true,
          //   realtime: true,
          //   start: 0,
          //   end: 100,
          // },
          // {
          //   type: "inside",
          //   realtime: true,
          //   start: 65,
          //   end: 85,
          // },
        ],
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            data: res.x,
          },
        ],
        yAxis: [
          {
            name: "流量(m³/s)",
            type: "value",
            axisLine: {
              lineStyle: {
                // color: "#00eaff",
              },
            },
          },
          // {
          //   name: "面雨量(mm)",
          //   nameLocation: "start",
          //   alignTicks: true, //属性指定了是否将两个Y轴的刻度对齐。
          //   type: "value",
          //   inverse: true, //反向
          //   axisLine: {
          //     lineStyle: {
          //       // color: "#2378f7",
          //     },
          //   },
          // },
        ],
        series: [
          {
            name: "指数A",
            type: "line",
            yAxisIndex: 0,
            lineStyle: {
              width: 2,
              color: "#00FF00", //改变折线点的颜色
            },
            itemStyle: {
              color: "#00FF00", //改变折线点的颜色
            },

            data: res.A,
          },
          {
            name: "指数B",
            type: "line",
            yAxisIndex: 0,
            lineStyle: {
              width: 2,
              color: "#8A2BE2", //改变折线点的颜色
            },
            itemStyle: {
              color: "#8A2BE2", //改变折线点的颜色
            },

            data: res.B,
          },
          {
            name: "指数C",
            type: "line",
            yAxisIndex: 0,
            lineStyle: {
              width: 2,
              color: "rgb(255, 219, 92)", // 修改折线点的颜色
            },
            itemStyle: {
              color: "rgb(255, 219, 92)", // 修改折线点的颜色
            },

            data: res.C,
          },
          // {
          //   name: "面雨量",
          //   type: "bar",
          //   yAxisIndex: 1,
          //   showBackground: true,
          //   barWidth: 10,
          //   itemStyle: {
          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //       { offset: 0, color: "#83bff6" },
          //       { offset: 0.5, color: "#188df0" },
          //       { offset: 1, color: "#188df0" },
          //     ]),
          //   },
          //   emphasis: {
          //     itemStyle: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //         { offset: 0, color: "#2378f7" },
          //         { offset: 0.7, color: "#2378f7" },
          //         { offset: 1, color: "#83bff6" },
          //       ]),
          //     },
          //   },
          //   data: res.pr,
          // },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
